<template>
	<view class="bgIndex ">
		<view class=" bg">
			<view class="flex-end-top">
				<view class="orderLocation">
					<image class="orderImg" :src="orderEvaluation.content_img"
						mode="">
					</image>

				</view>
				<view class="margin-left_16rpx flex-columns" style="width:454rpx;height: 160rpx;">
					<view class="font-overflow2 font-weight" style="width:100%">
						{{orderEvaluation.title}}


					</view>


					<view class="font-overflow2">
						<text
							style="color: #999999;">{{orderEvaluation.vice_title}}

						</text>


					</view>

					<view class="">
						<text class="font-weight" style="color: red ; margin-right: 10rpx">{{orderEvaluation.price}}</text><text style="color:#999999">{{currency_name}}/{{orderEvaluation.work_time}}服务时长</text>
					</view>


				</view>
			</view>
			<view class="margin-top_40rpx" style="color: rgb(151, 151, 151) ;">

				<view class=" flex-start-center">
					技术：<uni-rate v-model="form.technology_score" />
				</view>
				<view class="flex-start-center">
					服务：<uni-rate v-model="form.service_score" />
				</view>
				<view class="flex-start-center">
					声音：<uni-rate v-model="form.voice_score"  />
				</view>
			</view>
			<view class=" margin-top_20rpx" style="background-color: #fff;">
				<view class="font-weight_bold">
					描述信息
				</view>
				<view class="textarea-box margin-bottom_20rpx">
					<textarea v-model="form.evaluate" placeholder="请输入对本次的服务" maxlength="50"
						@input="descInput" style="height: 500rpx;" />
					<view class="textarea-color">{{ remnant }}/50</view>
				</view>
				<sunui-upimg1 class="margin-top_20rpx" :border="'1px dashed #bfbfbf'" :formData="imgFormData"
					:storageMode="storageMode" :header="header" :size="['200rpx', '200rpx']" btnName="评价图"
					:uploadServerUrl="upPicUrl" ref="selectimgandupload1" @uploaded="imgLoaded1" @change="imgsChange1"
					:maxFileNumber="1"><template v-slot:icon>
						<uni-icons type="camera-filled" color="#1890FF" size="40"></uni-icons>
					</template></sunui-upimg1>

			</view>
			<view class="submitEvaluation flex" @click="submitEvaluationFn(orderEvaluation.service_order_id)"> 
				提交评价
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				currency_name:uni.getStorageSync("system").currency_name,
				userInfo: uni.getStorageSync("userInfo"),
				rateValue: 5,
				form: {
					// 技术得分
					technology_score:'5',
					// 服务得分
					service_score:'5',
					// 声音得分
					voice_score:'5',
					// 评价
					evaluate:'',
					// 评价图片
					evaluate_img:''
				},
				remnant: 0,
				imgFormData: null,
				storageMode: "2",
				header: null,
				upPicUrl: null,
				img: [],
				imgStr: [],
				tagAddList:[],
				orderEvaluation:null

			}
		},
		onLoad(options) {
          
		  
		  const decodedData = {};
		  for (const key in options) {
		  	// 解码当前字段的值
		  	const decodedValue = decodeURIComponent(options[key]);
		  
		  	// 将解码后的值存储到新的对象中
		  	decodedData[key] = decodedValue;
		  }
		  this.orderEvaluation=decodedData

		},
		onShow() {
			this.$at.releaseKey('refuseSubmit');
		},
		methods: {
			// 备注
			descInput(e) {
				this.remnant = e.detail.value.length;
				if (this.remnant >= 50) {
					this.$sun.toast('说明字数已达上限');
				}
			},
			// 上传图片返回
			imgLoaded1(e) {
				console.log(e)
			
				this.img = [];
				for (let i = 0; i < e.length; i++) {
					this.img.push(e[i].url);
				}
			
			
				this.imgStr = this.img
			
				this.form.evaluate_img = this.imgStr.length === 1 ? this.imgStr[0].toString() : this.imgStr
					.join(',');
			},
			imgsChange1(file) {
			
				console.log('上传发生改变this.storageMode1111============', this.storageMode, '参数file', file);
			
			
				if (file.length) {
					this.upPicUrl = this.$api.upload;
					let filesNmae = 'nmoBackground_01.png'; // this.timeDate + 'png'
					this.imgFormData = {
						file: file,
						getsize: file.size,
						getContentType: ['image/png', 'image/jpeg'],
						getoriginalfilename: filesNmae,
						getName: filesNmae
					};
					this.$nextTick(() => {
						this.$refs.selectimgandupload1.upload(); //图片上传
					});
				} else {
					this.form.evaluate_img = '',
						this.imgStr = []
				}
				// this.niuyunLoop(file,0)
			
			},
			submitEvaluationFn(id){
				this.form.id=id
				this.$at.uniDoFunc({
					key: 'refuseSubmit',
					success: async () => {
						this.$at.lockKey('refuseSubmit');
				
				        if(!this.form.evaluate){
							this.$sun.toast('请描述本次的服务', 'none')
							this.$at.releaseKey('refuseSubmit');
						}else if(!this.form.evaluate_img){
							this.$sun.toast('请上传评价图', 'none')
							this.$at.releaseKey('refuseSubmit');
						}else{
							
							
							const result = await this.$http.post({
								url: this.$api.commentService,
								data: {
									...this.form
							
								},
								headers: {
									'Authorization': this.userInfo.token
								}
							
							})
							if (result.code == 0) {
							
								this.$sun.toast(result.message, 'none')
							 	
								setTimeout(() => {
									this.$sun.navBack()
								}, 500)
							
							
							
							} else {
								this.$sun.toast(result.message, 'none')
							}
							
							this.$at.releaseKey('refuseSubmit');
						}
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.bgIndex {
		padding: 26rpx;

		.bg {
			background-color: #fff;
			
			height: 743px;
			padding: 26rpx;

			.textarea-box {
				margin-top: 24rpx;
				border: 2rpx dashed #1e6ceb;
				background: #fff;
				padding: 30rpx;
				border-radius: 20rpx;
				height: 600rpx;

				.textarea-color {
					text-align: right;
					color: #999;
				}
			}
            .submitEvaluation{
				margin-top: 30rpx;
				height: 100rpx;
				border-radius: 56rpx;
				color: #fff;
				background: linear-gradient(90.00deg, rgb(98, 54, 255),rgb(153, 20, 223) 100%);
			}
			.orderLocation {
				position: relative;

				.orderImg {
					width: 90px;
					height: 90px;
					border-radius: 20rpx;

				}

				.orderStatusImg {
					position: absolute;
					left: 0;
					top: 0;
					width: 106rpx;
					height: 48rpx;
					border-radius: 16rpx 0rpx 16rpx 0rpx;
					color: #fff;
					background: rgb(224, 32, 32);
					z-index: 999;
				}

				.orderStatusImged {
					position: absolute;
					left: 0;
					top: 0;
					width: 106rpx;
					height: 48rpx;
					border-radius: 16rpx 0rpx 16rpx 0rpx;
					color: #fff;
					border-radius: 16rpx 0rpx 16rpx 0rpx;

					background: rgb(0, 0, 0);
					z-index: 999;
				}
			}
		}

	}
</style>